<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
	<style type="text/css">
		#d1{
			width: 1038px;
			height: 870px;
			margin: 0px auto;
			position: relative;
			background: url(images/bg.jpg) no-repeat center center;
		}
		#d2{
			width: 63px;
			border: solid 1px orange;
			position: absolute;
			right: 55px;
			top: 0px;
			font-size: 14px;
			text-align: center;
			background-color: white;
		}
		#d2 a{
			color: orange;
			line-height: 23px;
			text-decoration: none;
		}
		#d2 ul{
			list-style: none;
			margin: 0px;
			padding: 0px;
			width: 63px;
			display: none;
		}
		#d2 ul li{
			width: 63px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			font-size: 13px;
		}
		.ul1{
			background-color: coral;
			color: white;
		}
		/*中间*/
		#dz{
			width: 700px;
			height: 500px;
			position: relative;
			top: 235px;
			left: 235px;
		}
		/*包含按钮的div*/
		#anniu{
			width: 100%;
			height: 30px;
			position: relative;
			border-bottom: solid 1px #90EE90;
		}
		/*按钮定位*/
		#an1{
			top: 0px;
			left: 10px;
		}
		#an2{
			top: 0px;
			left: 120px;
		}
		/*按钮*/
		input{
			width: 100px;
			height: 30px;
			position: absolute;
			border: solid 1px darkgray;
			border-bottom: none;
			border-radius: 2px;
			background-color: white;
			outline-style: none;
		}
		/*中间下部分*/
		#dz2{
			width: 788px;
			height: 433px;
			
		}
		#dz2 img{
			display: none;
		}
		/*按钮点击后*/
		.inputdian{
			font-weight: bold;
			height: 31px;
			background-color: linear-gradient(to buttom,#98FB98,white);
			border-left: solid 1px #90EE90;
			border-right: solid 1px #90EE90;
			border-top: solid 3px #90EE90;
			
		}
	</style>
	<body>
		<div id="d1">
			<div id="d2">
				<a href="#" id="wode">我的当当</a>
				<ul>
					<li>我的订单</li>
					<li>我的收藏</li>
					<li>礼券/礼品</li>
					<li>我的评论</li>
					<li>我的积分</li>
					<li>我的余额</li>
					<li>数字商品</li>
				</ul>
			</div>
			
			<div id="dz">
				<div id="anniu">
					<input type="button" id="an1" value="我的订单" />
					<input type="button" id="an2" value="我的团购订单" />
				</div>
				<div id="dz2">
					<img src="images/order.jpg" id="dingdan" />
					<img src="images/tuan.jpg" id="tuangou" />
				</div>
			</div>
		</div>
		
		
	</body>
	<script type="text/javascript">
		$("#d2").hover(function(){
			$(this).find("ul").show();
			$(this).find("ul").find("li").hover(function(){
				$(this).addClass("ul1");
			},
			function(){
				$(this).removeClass("ul1");
			})
		},
		function(){
			$(this).find("ul").hide();
		})
		
		$("#an1").click(function(){
			$("#an2").removeClass("inputdian");
			$(this).addClass("inputdian");
			$("#tuangou").hide();
			$("#dingdan").show("slow")
		})
		$("#an2").click(function(){
			$("#an1").removeClass("inputdian");
			$(this).addClass("inputdian");
			$("#dingdan").hide();
			$("#tuangou").show("slow")
		})
		
	</script>
</html>
